<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { Sunny } from '@element-plus/icons-vue'
import type { IntervalHandle } from '@/types'

const format = 'YYYY[年]MM[月]DD[日] HH:mm:ss'
const time = ref(dayjs().format(format))
const degree = ref(26)

let timer: IntervalHandle

function interval() {
  timer = setInterval(() => {
    time.value = dayjs().format(format)
  }, 1e3)
}

onMounted(() => {
  interval()
})
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<template>
  <div class="d-flex align-items-center date-temperature">
    <span class="time">{{ time }}</span>
    <span class="mx-3 divider" />
    <span class="item-icon weather-icon">
      <Sunny />
    </span>
    <img class="mx-2 item-icon temperature-icon" src="./temperature.svg" alt="icon">
    <span class="temperature-text">
      {{ degree }}℃
    </span>
  </div>
</template>

<style scoped>
.date-temperature {
  color: rgba(205, 214, 227, 1);
  font-size: 14px;
}
.temperature-icon,
.item-icon {
  display: block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
}
.divider {
  display: block;
  width: 0;
  height: 20px;
  border-left: 1px solid rgba(158, 197, 231, 0.35);
}
.weather-icon {
  color: #E2B12E;
}
.temperature-text {
  font-size: 16px;
}
</style>
